<template>
  <div class="home">
    <van-nav-bar>
      <template slot="left">
        <van-icon name="location-o" color="black" size="22px" class="my-icon"><span class="city">&nbsp;上海</span>&nbsp;></van-icon>
      </template>
    </van-nav-bar>
    <van-swipe :autoplay="3000" class="my-swiper">
  <van-swipe-item v-for="(img, index) in lunboList" :key="index" @click="enter(index)">
    <img :src="img.ImgUrl" class="swiperurl"/>
  </van-swipe-item>
</van-swipe>
<img src="https://res.bestcake.com/images/newIndex/title.png" class="title">
<a href="javascript:void(0)" class="guanggao"><img class="guanggaoImg" :src="BannerList.ImgUrl"></a>
  <van-grid :column-num="4" :border='false' class="my-grid">
  <van-grid-item v-for="(icon,index) in IconList" :key="index" :icon="icon.ImgUrl" :text="icon.ActName"/></van-grid>
  <van-notice-bar :text="Notice" color="#1fb1b8">
    <template slot="left-icon">
      <div class="my-notice">
        通知:
      </div>
    </template>
  </van-notice-bar>
  <div class="special">
      <div class="float-l special-item" v-for="(content,index) in ContentList" :key="index">
      <a href="javascript:void(0)">
          <img class="specialImg"  :src="content.ImgUrl">
      </a>
    </div>
  </div>
  <div class="box-header">
    <a href="javascript:void(0)">
      <img class="box-header-img" :src="SaleList1.TabImgUrl"/>
    </a>
     <div class="small-box">
       <van-swipe indicator-color="white" :width="156" :height="190" :show-indicators="false">
        <van-swipe-item v-for="(item,index) in getImgUrl2(SaleList1.CakeList)" :key="index" class="small-box-item">
          <img :src="item.ImgUrl">
           <div class="Name">{{item.Name}}</div>
           <div class="contain"><span class="price">￥{{item.Price}}</span>/{{item.Size}}</div>
        </van-swipe-item>
      </van-swipe>
     </div>
  </div>
   <div class="box-header">
    <a href="javascript:void(0)">
      <img class="box-header-img" :src="SaleList2.TabImgUrl"/>
    </a>
    <div class="small-box">
      <van-swipe indicator-color="white" :width="156" :height="190" :show-indicators="false">
        <van-swipe-item v-for="(item,index) in getImgUrl2(SaleList2.CakeList)" :key="index" class="small-box-item">
          <img :src="item.ImgUrl">
          <div class="Name">{{item.Name}}</div>
           <div class="contain"><span class="price">￥{{item.Price}}</span>/{{item.Size}}</div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
   <div class="box-header" id="last-box">
    <a href="javascript:void(0)">
      <img class="box-header-img" :src="SaleList3.TabImgUrl"/>
    </a>
   <div class="small-box">
      <van-swipe indicator-color="white" :width="156" :height="190" :show-indicators="false">
        <van-swipe-item v-for="(item,index) in getImgUrl2(SaleList3.CakeList)" :key="index" class="small-box-item">
          <img :src="item.ImgUrl">
          <div class="Name">{{item.Name}}</div>
          <div class="contain"><span class="price">￥{{item.Price}}</span>/{{item.Size}}</div>
        </van-swipe-item>
      </van-swipe>
   </div>
  </div>
  </div>
</template>
<script>
import { constants } from 'crypto';
export default {
  data:()=>({
    lunboList:[],
    BannerList:{},
    IconList:[],
    Notice:"",
    ContentList:[],
    SaleList1:{},
    SaleList2:{},
    SaleList3:{}
  }),
  created () {
    this.getLunbo()

    // console.log(this.CakeList)
    this.getImgUrl2()
  },
  methods: {
    async getLunbo(){
      const  result=await this.$apis.bescerIndex()
      // console.log(result.data.Tag.mainresult)
     this.lunboList=result.data.Tag.mainresult.SwiperBannerList
     this.BannerList=result.data.Tag.mainresult.AbsoluteBannerList[0]
     this.IconList=result.data.Tag.mainresult.TopIconList
     this.Notice=result.data.Tag.mainresult.NoticeList
     this.ContentList=result.data.Tag.mainresult.CenterContentList
     this.SaleList1=result.data.Tag.mainresult.SaleList[0]
     this.SaleList2=result.data.Tag.mainresult.SaleList[1]
     this.SaleList3=result.data.Tag.mainresult.SaleList[2]
     console.log(this.getImgUrl2(this.SaleList1.CakeList))
    },
    getImgUrl2(CakeList) {
    var baseUrl = "https://res.bestcake.com/m-images/ww/";
    if (typeof CakeList == "string") {
      CakeList = JSON.parse(CakeList);
    }
    // console.log(CakeList)
    CakeList.forEach(item => {
      if (item.SupplyNo.indexOf("RP") != -1) {
        item.ImgUrl = `${baseUrl}rp/${item.Name}.jpg`;
      } else if (item.SupplyNo.indexOf("JZ") != -1) {
        item.ImgUrl = `${baseUrl}jz/${item.Name}.png`;
      } else if (item.SupplyNo.indexOf("NS") != -1) {
        item.ImgUrl = `${baseUrl}ns/${item.Name}.jpg`;
      } else if (item.SupplyNo.indexOf("KSK") != -1) {
        item.ImgUrl = `${baseUrl}jd/${item.Name}.png`;
      }
    });
    return CakeList;
  },
  enter(index){
    this.$router.push('/home/goods/'+index)
    // console.log(index)
  }
  }
}
</script>

<style lang="less" scoped>
    .home{
      width: 100%;
      overflow-x: hidden;
       .my-icon{
      height: 26px;
      .city{
      font-size: 16px;
    }
    }
      .my-swiper{
        margin: 0 15px;
        img{width: 100%;height: 192px;border-radius:10px;}
      }
      .title {
    width: 100%;
      }
      .guanggao{
        width: 100%;
        padding: 0 10px;
        .guanggaoImg{
          width: 95%;
        }
      }
      .van-image__img{
        width: 54px;
        height: 54px;
      }
      .my-notice{
        width: 38px;
        height: 19px;
        background-color: #1fb1b8;
        color: #fff;
        border-radius: 5px;
        line-height: 19px;
        text-align: center;
        margin-right: 8px;
      }
      .special{
        width: 100%;
        padding: 4.2667vw;
        .special-item {
          background: #f9f9f9;
          border-radius: 1.6vw;
          width: 44.533vw;
          height: 26.667vw;
          margin-right: 2.4vw;
          margin-bottom: 2.4vw;
          position: relative;
          overflow: hidden;
          float: left;
          img{
              width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
          }
      }
      }
      #last-box{
        margin-bottom: 60px;
      }
      .box-header{
        .box-header-img {
        height: 100%;
        width: 100%;
        display: block;
        }
        .small-box {
        width: 100%;
        height: 190px;
        margin: 10px 0;
        .small-box-item {
          display: inline-block;
          background: #fff;
          border-radius: 10px;
          box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        img{
          width: 120px;
          height: 120px;
        }
        .Name{
          width: 31.5vw;
          margin: 0 auto;
          height: 10.667vw;
          margin-top: 1.334vw;
          overflow: hidden;
          line-height: 5.33vw;
          font-weight: bold;
          font-size: 3.7334vw;
        }
        .contain{
          font-size: 4.2667vw;
          color: #ccc;
          .price{
            margin-left: 15px;
          color: #CC2825;
          font-size: 4.2667vw;
        }
        }
        }
        }
  }
}
</style>
